<template>
  <Card title="表单属性">
    <draggable
      :list="localList"
      item-key="name"
      handle=".drag-handle"
      animation="200"
      @change="handleDragChange"
    >
      <template #item="{ element, index }">
        <div
          class="field-row"
          style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px;"
        >
          <span class="drag-handle" style="cursor: move;">⠿</span>

          <Input
            :model-value="element.label"
            @update:model-value="(val) => handleFieldChange(index, 'label', val)"
            placeholder="Label"
            style="width: 120px"
          />
          <Select
            :model-value="element.type"
            @update:model-value="(val) => handleFieldChange(index, 'type', val)"
            :options="fieldTypeOptions"
            placeholder="类型"
            style="width: 120px"
          />
          <InputNumber
            :model-value="element.row"
            @update:model-value="(val) => handleFieldChange(index, 'row', val || 1)"
            :min="1"
            placeholder="行"
            style="width: 80px"
          />
          <Input
            :model-value="element.name"
            @update:model-value="(val) => handleFieldChange(index, 'name', val)"
            placeholder="字段名"
            style="width: 150px"
          />
          <Input
            :model-value="element.tips"
            @update:model-value="(val) => handleFieldChange(index, 'tips', val)"
            placeholder="提示说明"
            style="width: 150px"
          />

          <Button type="link" danger @click="removeField(index)">
            删除
          </Button>
        </div>
      </template>
    
    </draggable>

    <Button type="dashed" block @click="addField" style="margin-top: 16px;">
      + 添加字段
    </Button>
  </Card>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import draggable from 'vuedraggable';
import { Card, Button, Select, Input, InputNumber } from 'ant-design-vue';

interface FieldItem {
  label: string;
  type: string;
  row: number;
  name: string;
  tips: string;
}

const props = defineProps({
  modelValue: {
    type: Array as () => FieldItem[],
    default: () => [
      {
        label: '',
        type: 'input',
        row: 1,
        name: `field_${Date.now()}`,
        tips: ''
      }
    ],
  },
});

const emit = defineEmits<{ (e: 'update:modelValue', value: FieldItem[]): void }>();

// 本地数据副本
const localList = ref<FieldItem[]>([]);

// 初始化数据
watch(() => props.modelValue, (newVal) => {
  if (JSON.stringify(newVal) !== JSON.stringify(localList.value)) {
    localList.value = newVal.map(item => ({ ...item }));
  }
}, { immediate: true, deep: true });

// 防抖更新父组件数据
let updateTimer: ReturnType<typeof setTimeout>;
const updateParent = () => {
  clearTimeout(updateTimer);
  updateTimer = setTimeout(() => {
    emit('update:modelValue', localList.value.map(item => ({ ...item })));
  }, 100);
};

const fieldTypeOptions = [
  { label: '输入框', value: 'input' },
  { label: '选择器', value: 'select' },
  { label: '日期', value: 'date' },
  { label: '富文本', value: 'textarea' },
  { label: '邮箱', value: 'email' },
  { label: '国家', value: 'country' },
  { label: '省份', value: 'state' },
  { label: '单选框', value: 'radio' },
  { label: '复选框', value: 'checkbox' },
  { label: '提交按钮', value: 'submit' },
];

// 添加新字段
function addField() {
  localList.value.push({
    label: '',
    type: 'input',
    row: 1,
    name: `field_${Date.now()}`,
    tips: '',
  });
  updateParent();
}

// 删除字段
function removeField(index: number) {
  localList.value.splice(index, 1);
  updateParent();
}

// 处理字段变更
function handleFieldChange<T extends keyof FieldItem>(
  index: number,
  field: T,
  value: FieldItem[T]
) {
  const newItem = { ...localList.value[index], [field]: value };
  localList.value.splice(index, 1, newItem);
  updateParent();
}

// 处理拖拽排序
function handleDragChange() {
  updateParent();
}
</script>

<style scoped>
.drag-handle {
  cursor: move;
  user-select: none;
}
.field-row {
  padding: 8px;
  background: #fafafa;
  border-radius: 4px;
  transition: all 0.3s;
}
.field-row:hover {
  background: #f0f0f0;
}
</style>